<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阴影</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            box-shadow: 10px 10px rgba(0, 0, 0, 0.5);
        }

        .box1 {
            margin-top: 20px;
            width: 200px;
            height: 200px;
            background-color: red;
            box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
        }

        .box2 {
            margin-top: 50px;
            width: 200px;
            height: 200px;
            background-color: red;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
        }

        .box3 {
            margin-top: 50px;
            width: 200px;
            height: 200px;
            background-color: red;
            box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0) inser;
        }

        h1 {
            text-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>

<body>
    <div class="box">阴影</div>
    <div class="box1">阴影</div>
    <div class="box2">阴影</div>
    <div class="box3">阴影</div>
    <h1>阴影</h1>
</body>

</html>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid 布局详解</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f4f4f4;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        header {
            background-color: #333;
            color: #fff;
            padding: 30px 0;
            text-align: center;
        }

        header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        header p {
            font-size: 1.2em;
            opacity: 0.9;
        }

        main {
            padding: 30px 0;
        }

        section {
            background-color: #fff;
            margin-bottom: 30px;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        h2 {
            color: #333;
            margin-bottom: 20px;
            font-size: 2em;
            border-bottom: 2px solid #333;
            padding-bottom: 10px;
        }

        h3 {
            color: #555;
            margin: 20px 0 15px;
            font-size: 1.5em;
        }

        p {
            margin-bottom: 15px;
            font-size: 1.1em;
        }

        .grid-demo {
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 6px;
            padding: 20px;
            margin: 20px 0;
        }

        .grid-container {
            display: grid;
            gap: 10px;
            margin: 20px 0;
            background-color: #e9e9e9;
            padding: 10px;
            border-radius: 4px;
        }

        .grid-item {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            text-align: center;
            font-size: 1.2em;
            border-radius: 4px;
        }

        /* 基本网格示例 */
        .basic-grid {
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 100px 100px;
        }

        /* 不同列宽示例 */
        .different-widths {
            grid-template-columns: 200px 1fr 1fr;
            grid-template-rows: 100px 100px;
        }

        /* 网格项位置控制示例 */
        .item-position {
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 100px);
        }

        .item-position .item1 {
            grid-column: 2;
            grid-row: 2;
        }

        .item-position .item2 {
            grid-column: 3;
            grid-row: 1;
        }

        /* 网格项合并示例 */
        .item-span {
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(3, 100px);
        }

        .item-span .item1 {
            grid-column: 1 / 3;
            grid-row: 1;
        }

        .item-span .item2 {
            grid-column: 3 / 5;
            grid-row: 1 / 3;
        }

        .item-span .item3 {
            grid-column: 1;
            grid-row: 2 / 4;
        }

        /* 对齐方式示例 */
        .alignment {
            grid-template-columns: repeat(3, 150px);
            grid-template-rows: repeat(2, 150px);
            justify-content: center;
            align-content: center;
            height: 400px;
        }

        .alignment .item1 {
            justify-self: start;
            align-self: start;
        }

        .alignment .item2 {
            justify-self: center;
            align-self: center;
        }

        .alignment .item3 {
            justify-self: end;
            align-self: end;
        }

        /* 响应式网格示例 */
        .responsive-grid {
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            grid-auto-rows: 100px;
        }

        /* 隐式网格示例 */
        .implicit-grid {
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 100px;
            grid-auto-rows: 80px;
        }

        /* 网格线命名示例 */
        .named-lines {
            grid-template-columns: [col1-start] 1fr [col1-end col2-start] 1fr [col2-end col3-start] 1fr [col3-end];
            grid-template-rows: [row1-start] 100px [row1-end row2-start] 100px [row2-end];
        }

        .named-lines .item1 {
            grid-column: col1-start / col3-end;
        }

        /* 网格区域示例 */
        .grid-areas {
            grid-template-columns: 1fr 3fr 1fr;
            grid-template-rows: auto 1fr auto;
            grid-template-areas:
                "header header header"
                "sidebar main ads"
                "footer footer footer";
            height: 500px;
        }

        .grid-areas .header {
            grid-area: header;
            background-color: #2196F3;
        }

        .grid-areas .sidebar {
            grid-area: sidebar;
            background-color: #FF9800;
        }

        .grid-areas .main {
            grid-area: main;
            background-color: #4CAF50;
        }

        .grid-areas .ads {
            grid-area: ads;
            background-color: #9C27B0;
        }

        .grid-areas .footer {
            grid-area: footer;
            background-color: #F44336;
        }

        pre {
            background-color: #f5f5f5;
            padding: 15px;
            border-radius: 4px;
            overflow-x: auto;
            margin: 15px 0;
            font-family: Consolas, Monaco, 'Andale Mono', monospace;
            font-size: 14px;
        }

        code {
            background-color: #f0f0f0;
            padding: 2px 4px;
            border-radius: 3px;
            font-family: Consolas, Monaco, 'Andale Mono', monospace;
        }

        ul,
        ol {
            margin: 15px 0;
            padding-left: 30px;
        }

        li {
            margin-bottom: 10px;
            font-size: 1.1em;
        }

        .property-list {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin: 20px 0;
        }

        .property-item {
            background-color: #f0f0f0;
            padding: 15px;
            border-radius: 4px;
        }

        .property-item h4 {
            color: #333;
            margin-bottom: 10px;
            font-size: 1.2em;
        }

        footer {
            background-color: #333;
            color: #fff;
            padding: 20px 0;
            text-align: center;
            margin-top: 30px;
        }
    </style>
</head>

<body>
    <header>
        <div class="container">
            <h1>CSS Grid 布局详解</h1>
            <p>深入了解 CSS Grid 布局系统的概念、属性和用法</p>
        </div>
    </header>

    <main class="container">
        <section>
            <h2>什么是 CSS Grid？</h2>
            <p>CSS Grid 是一种二维布局系统，允许你在网页上创建复杂的网格布局。它是 CSS 中最强大的布局系统之一，能够同时处理行和列，使你能够精确控制页面元素的位置和大小。</p>

            <h3>Grid 布局的核心概念</h3>
            <ul>
                <li><strong>网格容器 (Grid Container)</strong>：应用了 <code>display: grid</code> 的元素，它是所有网格项的父元素。</li>
                <li><strong>网格项 (Grid Item)</strong>：网格容器的直接子元素。</li>
                <li><strong>网格线 (Grid Line)</strong>：分隔网格行和列的线，包括水平线和垂直线。</li>
                <li><strong>网格轨道 (Grid Track)</strong>：两条相邻网格线之间的空间，即行或列。</li>
                <li><strong>网格单元格 (Grid Cell)</strong>：由相邻的水平线和垂直线围成的最小单位，类似于表格单元格。</li>
                <li><strong>网格区域 (Grid Area)</strong>：由一个或多个网格单元格组成的矩形区域。</li>
            </ul>
        </section>

        <section>
            <h2>Grid 布局的基本用法</h2>

            <h3>1. 创建基本网格</h3>
            <p>使用 <code>grid-template-columns</code> 和 <code>grid-template-rows</code> 属性定义网格的列和行：</p>

            <pre><code>.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    gap: 10px;
}</code></pre>

            <div class="grid-demo">
                <h4>基本网格示例</h4>
                <div class="grid-container basic-grid">
                    <div class="grid-item">1</div>
                    <div class="grid-item">2</div>
                    <div class="grid-item">3</div>
                    <div class="grid-item">4</div>
                    <div class="grid-item">5</div>
                    <div class="grid-item">6</div>
                </div>
            </div>

            <h3>2. 不同列宽的网格</h3>
            <p>可以为不同的列设置不同的宽度，结合使用固定值和弹性单位：</p>

            <pre><code>.grid-container {
    display: grid;
    grid-template-columns: 200px 1fr 1fr;
    grid-template-rows: 100px 100px;
    gap: 10px;
}</code></pre>

            <div class="grid-demo">
                <h4>不同列宽示例</h4>
                <div class="grid-container different-widths">
                    <div class="grid-item">固定宽度 (200px)</div>
                    <div class="grid-item">弹性宽度 (1fr)</div>
                    <div class="grid-item">弹性宽度 (1fr)</div>
                    <div class="grid-item">固定宽度 (200px)</div>
                    <div class="grid-item">弹性宽度 (1fr)</div>
                    <div class="grid-item">弹性宽度 (1fr)</div>
                </div>
            </div>

            <h3>3. 控制网格项的位置</h3>
            <p>使用 <code>grid-column</code> 和 <code>grid-row</code> 属性控制网格项在网格中的位置：</p>

            <pre><code>.item1 {
    grid-column: 2;
    grid-row: 2;
}

.item2 {
    grid-column: 3;
    grid-row: 1;
}</code></pre>

            <div class="grid-demo">
                <h4>网格项位置控制示例</h4>
                <div class="grid-container item-position">
                    <div class="grid-item item1">1 (位置：第2列，第2行)</div>
                    <div class="grid-item item2">2 (位置：第3列，第1行)</div>
                    <div class="grid-item">3</div>
                    <div class="grid-item">4</div>
                    <div class="grid-item">5</div>
                    <div class="grid-item">6</div>
                    <div class="grid-item">7</div>
                    <div class="grid-item">8</div>
                    <div class="grid-item">9</div>
                </div>
            </div>

            <h3>4. 网格项的合并（跨列和跨行）</h3>
            <p>使用 <code>grid-column-start</code>、<code>grid-column-end</code>、<code>grid-row-start</code> 和
                <code>grid-row-end</code> 属性（或简写形式）实现网格项的合并：</p>

            <pre><code>.item1 {
    grid-column: 1 / 3; /* 从第1列开始，到第3列结束（跨2列） */
    grid-row: 1; /* 第1行 */
}

.item2 {
    grid-column: 3 / 5; /* 从第3列开始，到第5列结束（跨2列） */
    grid-row: 1 / 3; /* 从第1行开始，到第3行结束（跨2行） */
}</code></pre>

            <div class="grid-demo">
                <h4>网格项合并示例</h4>
                <div class="grid-container item-span">
                    <div class="grid-item item1">1 (跨2列)</div>
                    <div class="grid-item item2">2 (跨2列2行)</div>
                    <div class="grid-item item3">3 (跨3行)</div>
                    <div class="grid-item">4</div>
                    <div class="grid-item">5</div>
                    <div class="grid-item">6</div>
                    <div class="grid-item">7</div>
                    <div class="grid-item">8</div>
                </div>
            </div>

            <h3>5. 对齐方式</h3>
            <p>Grid 布局提供了多种对齐属性，用于控制网格项在网格容器和网格区域中的对齐方式：</p>

            <pre><code>.grid-container {
    display: grid;
    justify-content: center; /* 水平居中对齐网格 */
    align-content: center; /* 垂直居中对齐网格 */
    height: 400px;
}

.item1 {
    justify-self: start; /* 网格项水平左对齐 */
    align-self: start; /* 网格项垂直上对齐 */
}

.item2 {
    justify-self: center; /* 网格项水平居中对齐 */
    align-self: center; /* 网格项垂直居中对齐 */
}</code></pre>

            <div class="grid-demo">
                <h4>对齐方式示例</h4>
                <div class="grid-container alignment">
                    <div class="grid-item item1">1 (左上对齐)</div>
                    <div class="grid-item item2">2 (居中对齐)</div>
                    <div class="grid-item">3 (默认对齐)</div>
                    <div class="grid-item">4 (默认对齐)</div>
                    <div class="grid-item">5 (默认对齐)</div>
                    <div class="grid-item">6 (默认对齐)</div>
                </div>
            </div>

            <h3>6. 响应式网格</h3>
            <p>使用 <code>repeat()</code> 函数和 <code>auto-fit</code>、<code>minmax()</code> 结合，可以创建自适应容器宽度的响应式网格：</p>

            <pre><code>.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}</code></pre>

            <div class="grid-demo">
                <h4>响应式网格示例</h4>
                <p>尝试调整浏览器窗口大小，观察网格列数的变化：</p>
                <div class="grid-container responsive-grid">
                    <div class="grid-item">1</div>
                    <div class="grid-item">2</div>
                    <div class="grid-item">3</div>
                    <div class="grid-item">4</div>
                    <div class="grid-item">5</div>
                    <div class="grid-item">6</div>
                    <div class="grid-item">7</div>
                    <div class="grid-item">8</div>
                </div>
            </div>

            <h3>7. 隐式网格</h3>
            <p>当网格项数量超过显式定义的网格单元格数量时，Grid 会自动创建隐式网格轨道。可以使用 <code>grid-auto-rows</code> 和 <code>grid-auto-columns</code>
                控制隐式轨道的大小：</p>

            <pre><code>.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 100px; /* 只定义了一行 */
    grid-auto-rows: 80px; /* 隐式行的高度 */
    gap: 10px;
}</code></pre>

            <div class="grid-demo">
                <h4>隐式网格示例</h4>
                <p>注意：第一行高度为 100px，后续隐式创建的行高度为 80px：</p>
                <div class="grid-container implicit-grid">
                    <div class="grid-item">1 (显式行)</div>
                    <div class="grid-item">2 (显式行)</div>
                    <div class="grid-item">3 (显式行)</div>
                    <div class="grid-item">4 (隐式行)</div>
                    <div class="grid-item">5 (隐式行)</div>
                    <div class="grid-item">6 (隐式行)</div>
                    <div class="grid-item">7 (隐式行)</div>
                </div>
            </div>

            <h3>8. 网格线命名</h3>
            <p>可以为网格线命名，使代码更具可读性和可维护性：</p>

            <pre><code>.grid-container {
    display: grid;
    grid-template-columns: [col1-start] 1fr [col1-end col2-start] 1fr [col2-end col3-start] 1fr [col3-end];
    grid-template-rows: [row1-start] 100px [row1-end row2-start] 100px [row2-end];
    gap: 10px;
}

.item1 {
    grid-column: col1-start / col3-end;
}</code></pre>

            <div class="grid-demo">
                <h4>网格线命名示例</h4>
                <div class="grid-container named-lines">
                    <div class="grid-item">1 (使用命名网格线跨列)</div>
                    <div class="grid-item">2</div>
                    <div class="grid-item">3</div>
                    <div class="grid-item">4</div>
                    <div class="grid-item">5</div>
                    <div class="grid-item">6</div>
                </div>
            </div>

            <h3>9. 网格区域布局</h3>
            <p>使用 <code>grid-template-areas</code> 属性可以创建更直观的网格布局，特别适合页面级布局：</p>

            <pre><code>.grid-container {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
        "header header header"
        "sidebar main ads"
        "footer footer footer";
    height: 500px;
    gap: 10px;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.ads { grid-area: ads; }
.footer { grid-area: footer; }</code></pre>

            <div class="grid-demo">
                <h4>网格区域布局示例</h4>
                <div class="grid-container grid-areas">
                    <div class="grid-item header">Header</div>
                    <div class="grid-item sidebar">Sidebar</div>
                    <div class="grid-item main">Main Content</div>
                    <div class="grid-item ads">Ads</div>
                    <div class="grid-item footer">Footer</div>
                </div>
            </div>
        </section>

        <section>
            <h2>Grid 布局的优势</h2>
            <ul>
                <li>能够同时处理行和列，创建复杂的二维布局</li>
                <li>提供了精确的位置控制，使元素定位更加灵活</li>
                <li>简化了响应式设计，无需使用复杂的浮动和定位技巧</li>
                <li>代码更加简洁和语义化，易于维护和扩展</li>
                <li>支持多种对齐方式，轻松实现元素的居中对齐等效果</li>
                <li>能够创建不规则的布局，突破了传统布局的限制</li>
            </ul>
        </section>

        <section>
            <h2>Grid 与 Flexbox 的区别</h2>
            <p>Grid 和 Flexbox 都是现代 CSS 布局系统，但它们有不同的适用场景：</p>

            <table style="width: 100%; border-collapse: collapse; margin: 20px 0;">
                <thead>
                    <tr style="background-color: #f2f2f2;">
                        <th style="padding: 12px; text-align: left; border: 1px solid #ddd;">特性</th>
                        <th style="padding: 12px; text-align: left; border: 1px solid #ddd;">CSS Grid</th>
                        <th style="padding: 12px; text-align: left; border: 1px solid #ddd;">Flexbox</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="padding: 12px; border: 1px solid #ddd;">维度</td>
                        <td style="padding: 12px; border: 1px solid #ddd;">二维（行和列）</td>
                        <td style="padding: 12px; border: 1px solid #ddd;">一维（行或列）</td>
                    </tr>
                    <tr>
                        <td style="padding: 12px; border: 1px solid #ddd;">适用场景</td>
                        <td style="padding: 12px; border: 1px solid #ddd;">页面级布局、复杂网格布局</td>
                        <td style="padding: 12px; border: 1px solid #ddd;">组件级布局、列表布局、导航栏</td>
                    </tr>
                    <tr>
                        <td style="padding: 12px; border: 1px solid #ddd;">对齐方式</td>
                        <td style="padding: 12px; border: 1px solid #ddd;">支持行和列的对齐</td>
                        <td style="padding: 12px; border: 1px solid #ddd;">主要支持主轴和交叉轴的对齐</td>
                    </tr>
                    <tr>
                        <td style="padding: 12px; border: 1px solid #ddd;">元素定位</td>
                        <td style="padding: 12px; border: 1px solid #ddd;">可以精确控制元素在网格中的位置</td>
                        <td style="padding: 12px; border: 1px solid #ddd;">元素按照顺序排列，定位相对有限</td>
                    </tr>
                </tbody>
            </table>
        </section>
    </main>

    <footer>
        <div class="container">
            <p>&copy; 2025 CSS Grid 布局详解. 本页面展示了 CSS Grid 布局系统的各种用法和示例。</p>
        </div>
    </footer>
</body>

</html>